<template>
  <div>
       <swiper :swipers="goodsBanner"></swiper> 
       <div>{{title}}</div>
       <p>{{desc}}</p>
       <price>{{min_price}}</price>
       <div v-html="content" class="content"></div>
       <list :list="hotList"></list>
  </div>
</template>
<script>
import { goods }  from  '../lib/detail'
import swiper  from '../components/swipers'
import price   from '../components/price'
import list  from '../components/list'
export default{
     components:{
           swiper,
           price,
           list
     },
     data(){
          return {
              goodsBanner:[],
              title:"",
              desc:"",
              min_price:"",
              content:"",
              hotList:""
          }
     },
     created(){
         let _id= this.$route.query.id;
         goods({id:_id}).then(res=>{
             console.log(res.data)
               let  banners=  res.data.goodsBanner;
               this.goodsBanner = banners.map((item,index)=>{
                     let  json ={};
                     json.src= item.url;
                     return  json
               });
               this.title =res.data.title;
               this.desc =  res.data.desc;
               this.min_price =res.data.min_price;
               this.content = res.data.content;
               this.hotList =  res.data.hotList
         })
     }
}
</script>
<style scoped>

.content>>>img{
     width:100%;
}
</style>

